{extend name='public/base' /}

{block name='content'}
<div class="layui-card">
    <div class="layui-card-body">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添 加</button>
        <button class="layui-btn layui-btn-sm" lay-event="allDel">删 除</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
        <i class="layui-icon layui-icon-edit"></i>编辑
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon layui-icon-delete"></i>删除
    </a>
</script>

<form class="layui-form" id="form" lay-filter="form" style="display: none">
    <div style="margin-top: 50px;"></div>
    <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div class="layui-inline">
            <input class="layui-input name" type="text" name="name" placeholder="请输入分类名称" autocomplete="off"
                   lay-verify="required" lay-reqtext="请输入分类名称">
        </div>
    </div>
</form>
{/block}

<!---->

{block name='js'}
<script>
    layui.use(['table', 'form'], function () {
        let $ = layui.$,
            form = layui.form,
            table = layui.table,
            TableData = table.render({
                id: 'testReload',
                elem: '#test',
                toolbar: '#toolbarDemo',
                method: 'post',
                url: '/manage/projects/content/classify/list',
                title: '分类列表',
                cols: [[
                    {type: 'numbers', align: 'center'},
                    {type: 'checkbox'},
                    {field: 'id', title: 'ID', minWidth: 80, hide: true},
                    {field: 'name', title: '名称', minWidth: 120, align: 'center'},
                    {field: 'createTime', title: '添加日期', minWidth: 150, align: 'center'},
                    {fixed: 'right', title: '操作', toolbar: '#barDemo', minWidth: 150, align: 'center'}
                ]],
                page: true
            });

        //工具栏事件
        table.on('toolbar(test)', function (obj) {
            let checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':  //添加
                    addData();
                    break;
                case 'allDel':  //删除
                    let data = checkStatus.data;
                    delData(data);
                    break;
            }
        });

        //监听工具条
        table.on('tool(test)', function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case 'edit':  //编辑
                    editData(data);
                    break;
                case 'del':  //删除
                    delData([data]);
                    break;
            }
        });

        //添加
        function addData() {
            $("#form")[0].reset();
            layer.open({
                type: 1,
                title: '添加分类',
                content: $('#form'),
                area: ['400px', '260px'],
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    let name = form.validate('.name'),
                        data = form.val('form');
                    if (!name) {
                        return false;
                    }
                    $.ajax({
                        type: 'post',
                        url: "/manage/projects/content/classify/add",
                        data: data,
                        success: function (res) {
                            if (res.code === 0) {
                                layer.close(index);
                                layer.msg('添加成功');
                                TableData.reload();
                            } else {
                                layer.msg(res.message);
                                return false;
                            }
                        }
                    });
                },
                btn2: function (index, layero) {
                    layer.close(index);
                }
            });
        }

        function editData(arr) {
            $('input[name="name"]').val(arr.name);
            layer.open({
                type: 1,
                title: '修改分类',
                content: $('#form1'),
                area: ['400px', '260px'],
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    let name = form.validate('.name'),
                        data = form.val('form');
                    if (!name) {
                        return false;
                    }
                    data['id'] = arr.id;
                    $.ajax({
                        'type': 'post',
                        'data': data,
                        'url': '/manage/projects/content/classify/update',
                        success: function (res) {
                            if (res.code === 0) {
                                layer.close(index);
                                layer.msg('修改成功');
                                TableData.reload();
                            } else {
                                layer.msg(res.message);
                            }
                        }
                    });
                },
                btn2: function (index, layero) {
                    $('input[name="name"]').val('');
                    layer.close(index);
                }
            });
        }

        //删除
        function delData(data) {
            layer.confirm('确定删除这些数据吗？', function (index) {
                $.post('/manage/projects/content/classify/delete',
                    {data: data},
                    function (res) {
                        if (res.code === 0) {
                            layer.msg('删除成功')
                            table.reload('testReload');
                        } else {
                            layer.msg(res.message);
                        }
                    }
                );
            })
        }

    });
</script>
{/block}